Skip to main content

300ms点击延迟

移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。如果通过监听touchstart事件来替代click事件的话,会导致一些问题:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件;当页面上有两个元素ABA元素在B元素上重叠放置,如果A元素的touchstart事件绑定的回调函数是隐藏A元素自身,那么当点击A元素后A元素会消失,事件的触发顺序是touchstart -> touchend -> click,如果在300ms内没有第二次点击便会触发click事件,此时由于A元素消失,那么click事件便落到了B元素上,如果B元素是个链接或者绑定了click事件,那么B元素的默认行为或者是绑定的事件回调便会意外地触发,这就是点击穿透问题,解决这个问题还是需要解决click事件的300ms延迟问题。

解决方案

禁止缩放

通过完全禁止缩放来使双击缩放的功能失效,此时浏览器就可以禁用默认的双击缩放行为并且去掉300ms点击延迟,但是在这种情况下双指缩放的功能也会失效。

<meta name="viewport" content="user-scalable=no">
<!-- 或 -->
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">

更改默认的视口宽度

浏览器在包含width=device-width也就是视口宽度=设备宽度或者设置为比viewport值更小的页面上禁用双击缩放行为,没有双击缩放就没有300ms点击延迟,这种方案没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为,用户仍然可以通过双指缩放操作来缩放页面。

<meta name="viewport" content="width=device-width">

touch-action

CSStouch-action属性用于设置触摸屏用户如何操纵元素的区域,它允许移除特定元素或整个文档的触发延迟,而无需禁用缩放。

touch-action:none;
/* 浏览器兼容性 https://caniuse.com/#search=touch-action */

FastClick

FastClickFT Labs专门为解决移动端浏览器300ms点击延迟问题所开发的一个轻量级的库。

document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
// https://github.com/ftlabs/fastclick

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.cnblogs.com/shytong/p/5463673.html
https://www.cnblogs.com/shiyou00/p/10410935.html
https://blog.csdn.net/qq_41047322/article/details/81287325